<template>
	<view class="mainwarp">
		<view>
			童年时光
			<text>+</text>
		</view>
		<view>
			列表页
			<text>+</text>
		</view>
		<view>
			位置1
			<text>+</text>
		</view>
		<view class="" style="height: 400rpx"></view>
	</view>
</template>

<script setup>
import { onMounted } from 'vue';
const props = defineProps({
	type: {
		type: Number
	}
});
onMounted(() => {
	// console.log(props.type);
});
</script>

<style lang="scss">
.mainwarp {
	--col-val: 3;
	$columns: 0;
	width: 100%;
	float: left;
	box-sizing: border-box;
	border: 1px solid red;
	view {
		width: 100%;
		height: 50px;
		float: left;
		line-height: 50px;
		border-bottom: 1px solid #20b6ff;
		& text {
			padding: 0px 6px;
			background: #20b6ff;
			border-radius: 6px;
			color: #fff;
			height: 30px;
			line-height: 30px;
			margin-left: 10px;
		}
	}
	@for $i from 1 through 3 {
		view:nth-of-type(#{$i}) {
			text-indent: $i * 200px - 180px;
		}
	}
	@for $j from $columns through 0 {
		view:nth-of-type(#{$j}) {
			display: none;
		}
	}
}

@media screen and (max-width: 751px) {
	view {
		font-size: 28rpx;
	}
	.mainwarp {
		width: 100%;
		height: 80rpx;
		float: left;
		box-sizing: border-box;
		view {
			width: 240rpx;
			height: 80rpx;
			float: left;
			line-height: 80rpx;
			border-bottom: 1rpx solid #20b6ff;
			color: #999;
			text-align: center;
			& text {
				background: #fff;
				color: #000;
			}
		}
		@for $i from 2 through 3 {
			view:nth-of-type(#{$i}) {
				text-indent: 0;
			}
		}
	}
}
</style>
